import React, { useState } from 'react';
import styles from './style/index.module.less';
import { Card, Divider, Menu, Grid } from '@arco-design/web-react';
import Architecture from '@/pages/organizational/management/architecture';
import TeacherManagement from '@/pages/organizational/management/teacherManagement';
import StudentManagement from '@/pages/organizational/management/studentManagement';
const MenuItem = Menu.Item;

function Management() {
  const [key, setKey] = useState('1');

  const clickMenuItem = (key: string) => {
    setKey(key);
  };

  return (
    <Card className={styles.card}>
      <Menu
        mode="horizontal"
        defaultSelectedKeys={[key]}
        onClickMenuItem={(key) => clickMenuItem(key)}
      >
        <MenuItem key="1">架构管理</MenuItem>
        <MenuItem key="2">教师管理</MenuItem>
        <MenuItem key="3">学生管理</MenuItem>
      </Menu>
      <Divider className={styles['half-divider']} />
      {(key === '1' && <Architecture />) ||
        (key === '2' && <TeacherManagement />) ||
        (key === '3' && <StudentManagement />)}
    </Card>
  );
}

export default Management;
